<template>
  <div class="flexContent">
    <div class="searchBox">

      <el-form class="demo-form-inline" :model="sForm" label-position="left" label-width="auto" @submit.native.prevent>
        <div class="serFlexBox">
          <div class="inputBox">
            <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                <el-form-item label="门店名称">
                  <el-input v-clearEmoji v-model.trim="sForm.name" clearable style="width: 95%"
                    @keyup.enter.native="searchFn" placeholder="请输入..." />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="btnBox">
            <el-button @click.stop="searchFn" class="searchBtn" icon="el-icon-search">搜索</el-button>
            <el-button @click.stop="resetFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table">
      <div class="listBox">
        <div class="inner" v-for="item in shopListByPage" :key="item.id" @click="showDrawer(item.id, item.name)">
          <img src="@/assets/img/store.png" alt="门店图标" />
          <div class="text">
            <div>
              <h3>{{ item.name }}</h3>
              <p class="address">{{ item.address }}</p>
            </div>
            <p class="btn">查看详情<img src="@/assets/img/right.png" alt="" /></p>
          </div>
        </div>
      </div>
      <div>
        <el-pagination :current-page="page.pageNum" :page-sizes="[8]" :page-size="page.pageSize" background
          layout="total, ->,sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <Drawer ref="drawer" :drawer.sync="drawer"></Drawer>
  </div>
</template>

<script>
import Drawer from "./components/Drawer";
import { getShopList } from "@/api/finance";

export default {
  name: "StoreLedger",
  components: {
    Drawer,
  },
  data() {
    return {
      sForm: {
        name: "",
      },
      page: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
      shopListByPage: [],
      drawer: false,
      isSearch: false,
    };
  },
  created() {
    this.getShopList();
  },
  methods: {
    // 获取门店列表
    async getShopList() {
      if (!this.isSearch) {
        this.sForm.name = "";
      }
      const res = await getShopList({ ...this.page, ...this.sForm });

      if (res.code === 200) {
        this.shopListByPage = res.data.list;
        this.page.total = res.data.total;
      }
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      };
      this.isSearch = true;
      this.getShopList();
    },
    // 重置
    resetFn() {
      this.page = {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      };
      this.isSearch = false;
      this.sForm.name = "";
      this.getShopList();
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      // if (this.isSearch) {
      //   this.searchFn();
      // } else {
      this.getShopList();
      // }
    },
    // 获取页数改变
    handleCurrentChange(val) {
      this.page.pageNum = val;
      // if (this.isSearch) {
      //   this.searchFn();
      // } else {
      this.getShopList();
      // }
    },
    async showDrawer(id, name) {
      this.$refs.drawer.showDetails(id, name);
      this.drawer = true;
    },
  },
};
</script>

<style scoped lang="scss">
.flexContent {
  .listBox {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding-left: 5%;
    justify-content: start;

    .inner {
      width: 20%;
      height: 156px;
      padding: 10px;
      background-color: #fff;
      /* margin: 60px 60px; */
      margin-bottom: .5208rem;
      margin-right: 5%;
      display: flex;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: -3px 3px 3px 0px rgba(10, 60, 255, 0.05),
        3px 0px 3px 0px rgba(10, 60, 255, 0.05);
      background-image: url('../../../assets/img/shopCard.png');
      background-repeat: no-repeat;
      background-size: cover;

      img {
        width: 26px;
        height: 26px;
        margin-right: 10px;
      }

      .text {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        /* width: 100%; */

        h3,
        p {
          margin: 0;
        }

        h3 {
          font-size: 16px;
          color: #fff;
          line-height: 26px;
          height: 26px;
          margin-bottom: 20px;
        }

        .address {
          color: #fff;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          padding-right: 20px;
        }

        .btn {
          align-self: flex-end;
          color: #fff;
          display: flex;
          font-size: 12px;
          align-items: center;

          img {
            width: 12px;
            height: 12px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
</style>
